<template>
    <Drawer id="drawer" title="Basic Drawer" placement="right" :closable="false" v-model="drawer" draggable :width=30>
      <div slot="header" class="header"></div>
      <div slot="trigger"  class="trigger"></div>
      <div style="padding:0px">
        <el-menu :default-active="currentCom" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#F0F0F0" active-text-color="#111">
          <el-menu-item index="sheet" v-if="sheetData">数据</el-menu-item>
          <el-menu-item index="edit-title" v-if="title">标题</el-menu-item>
          <el-submenu v-if="grid || xaxis || yaxis" index="x-axis" >
            <template slot="title">坐标系</template>
            <el-menu-item index="x-axis" v-if="xaxis">X 轴</el-menu-item>
            <el-menu-item index="y-axis" v-if="yaxis">Y 轴</el-menu-item>
            <el-menu-item index="grid" v-if="grid">网格</el-menu-item>
          </el-submenu>
          <el-submenu index="color" >
            <template slot="title" v-if="color || backgroundColor">色彩</template>
            <el-menu-item index="color" v-if="color">系列色</el-menu-item>
            <el-menu-item index="background-color" v-if="backgroundColor">背景色</el-menu-item>
          </el-submenu>
          <el-menu-item index="item-style" v-if="itemStyle">样式</el-menu-item>
          <el-menu-item index="label-style" v-if="label">标签</el-menu-item>
          <el-menu-item index="edit-legend" v-if="legend">图例</el-menu-item>
          <el-menu-item index="edit-bar" v-if="simpleBar">柱状图</el-menu-item>
          <el-menu-item index="edit-pie" v-if="simplePie">饼图</el-menu-item>
          <el-menu-item index="edit-scatter" v-if="simpleScatter">散点图</el-menu-item>
          <el-menu-item index="edit-line" v-if="simpleLine">折线图</el-menu-item>
          <el-menu-item index="edit-map" v-if="simpleMap">地图</el-menu-item>
          <el-menu-item index="edit-dt-map" v-if="dtMap">地图</el-menu-item>
          <el-menu-item index="edit-funnel" v-if="simpleFunnel">漏斗图</el-menu-item>
          <el-menu-item index="edit-radar" v-if="simpleRadar">雷达图</el-menu-item>
          <el-menu-item index="edit-sankey" v-if="simpleSankey">桑基图</el-menu-item>
          <el-menu-item index="pop-pyramid" v-if="popPyramid">人口金字塔</el-menu-item>
          <el-menu-item index="word-cloud" v-if="wordCloud">词云图</el-menu-item>
          <el-menu-item index="time-line" v-if="timeline">时间轴</el-menu-item>
          <el-menu-item index="visual-map-c" v-if="visualMapC">视觉映射</el-menu-item>
          <el-menu-item index="visual-map-p" v-if="visualMapP">视觉映射</el-menu-item>
          <el-menu-item index="data-zoom" v-if="dataZoom">缩放条</el-menu-item>
          <el-menu-item index="edit-table" v-if="baseTable">表格</el-menu-item>
          <el-menu-item index="dt-ranking-bar" v-if="dtRankingBar">排名图</el-menu-item>
        </el-menu>
        <div style="padding: 0 10px">
          <component :is="currentCom" :key="key"></component>
        </div>
      </div>
    </Drawer>
</template>
<script>
import { Drawer } from 'view-design'
const path = require('path')
const files = require.context('@/components/Edit/components', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})

export default {
  data () {
    return {
      key: 1,
      drawer: false,
      currentCom: 'sheet',
      sheetData: false,
      title: false,
      grid: false,
      xaxis: false,
      yaxis: false,
      legend: false,
      color: false,
      backgroundColor: false,
      simplePie: false,
      simpleBar: false,
      simpleScatter: false,
      simpleLine: false,
      simpleMap: false,
      simpleFunnel: false,
      simpleRadar: false,
      simpleSankey: false,
      popPyramid: false,
      wordCloud: false,
      label: false,
      itemStyle: false,
      timeline: false,
      visualMapC: false,
      visualMapP: false,
      dataZoom: false,
      dtMap: false,
      baseTable: false,
      dtRankingBar: false
    }
  },
  computed: {
  },
  methods: {
    handleSelect (key, keyPath) {
      this.currentCom = key
    },
    ini () {
      // console.log('显示')
      this.key += 1
      this.currentCom = 'sheet'
      var itemContent = this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent
      this.textColor = !!itemContent.textColor
      var detail = itemContent.detail
      this.sheetData = !!detail.sheetData
      this.title = !!detail.title
      this.grid = !!detail.grid
      this.xaxis = !!detail.xAxis
      this.yaxis = !!detail.yAxis
      this.legend = !!detail.legend
      this.color = !!detail.color
      this.simplePie = !!detail.simplePie
      this.simpleBar = !!detail.simpleBar
      this.simpleScatter = !!detail.simpleScatter
      this.simpleLine = !!detail.simpleLine
      this.simpleMap = !!detail.simpleMap
      this.simpleFunnel = !!detail.simpleFunnel
      this.simpleRadar = !!detail.simpleRadar
      this.simpleSankey = !!detail.simpleSankey
      this.popPyramid = !!detail.popPyramid
      this.wordCloud = !!detail.wordCloud
      this.dtMap = !!detail.dtMap
      this.label = !!detail.label
      this.itemStyle = !!detail.itemStyle
      this.timeline = !!detail.timeline
      this.visualMapC = !!detail.visualMapC
      this.visualMapP = !!detail.visualMapP
      this.backgroundColor = !!detail.backgroundColor
      this.dataZoom = !!detail.dataZoom
      this.baseTable = !!detail.baseTable
      this.dtRankingBar = !!detail.dtRankingBar
    }
  },
  mounted () {
  },
  watch: {
  },
  components: {
    Drawer,
    ...modules
  }
}
</script>

<style scoped>
  div.header {
    width: 100%;
    height: 0px;
    background-color: rgba(213, 184, 184, 0.651)
  }
  div.trigger {
    width: 1px;
    height: 100%;
    background-color: rgba(124, 155, 191, 0.342);
    cursor: w-resize;
    position: relative;
  }
  div.trigger:before {
    content: '';
    width: 100%;
    height: 50px;
    border-radius: 30px;
   /*  background-color: rgba(93, 167, 155, 0.719); */
    position: absolute;
    top: 50%
  }
</style>

<style>
  body > div.v-transfer-dom > div.ivu-drawer-wrap > div > div.ivu-drawer-content > div.ivu-drawer-body {
    padding: 0px
  }
  body > div.v-transfer-dom > div.ivu-drawer-wrap > div > div.ivu-drawer-drag > div {
    width: 5px
  }
</style>
